<template>
	<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBottom">
		<uni-list class="feedback-list" style="margin-bottom: 10px;">
			<uni-list-item direction="row" v-for="item in data" :key="item.id" clickable @click="showContent(item)">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="title uni-ellipsis-2">
							{{ item.title }}
						</view>
						<view class="date">
							{{ item.createtime }}
							<view class="btn" @click.stop="editContent(item)">编辑</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0"></image>
	</scroll-view>
</template>

<script>
import request from '../../../common/request.js'
export default {
	components: {
		
	},
	data() {
		return {
			data: [],
			page: 1,
			loadStatus: 'loading',
			showLoad: false,
		}
	},
	mounted() {
		this.getListData()
	},
	methods: {
		showContent(data) {
			uni.navigateTo({
				url: `/pages/train/experience/detail?id=${data.id}`
			})

		},
		editContent(data){
			uni.$emit('showContent', data)
		},
		lowerBottom() {
			if (this.loadStatus != 'loading') {
				this.loadStatus = 'loading'
				this.showLoad = true
				this.page++
				this.getListData()
			}
		},
		getListData() {
			request({
				url: '/study/myFeel',
				data: {
					page: this.page
				},
				method: 'POST',
			}).then(res => {
				if (res.code == 1) {
					this.data = this.data.concat(res.data)
					if (this.page == res.lastPage) {
						this.loadStatus = 'no-more'
					} else {
						this.loadStatus = 'more'
						this.showLoad = false
					}
				} else {
					this.loadStatus = 'no-more'
				}
			})
		},
	}
}
</script>

<style scoped>
::v-deep .uni-list {
	background-color: transparent !important;
}

::v-deep .uni-list-item {
	margin: 10px;
	border-radius: 12px;
}

.title span,
.title label {
	color: #fb7a30;
}
.btn{
	font-size: 12px;
	color: rgb(38, 104, 190);
	display: inline-block;
	margin-left: 15px;
}
</style>